//在页面加载时就进行操作
//再一次的github和sourcetree操作
window.onload = () => {
    var items = document.getElementsByClassName("item");
    var circles = document.getElementsByClassName("circle");
    var leftBtn = document.getElementById("left");
    var rightBtn = document.getElementById("right");
    var content = document.querySelector(".content");

    var index = 0;
    var timer = null;
    //清除class
    var clearclass = ()=>{
        for(let i=0;i<items.length;i++){
            items[i].className = "item";
            circles[i].className = "circle";
            circles[i].setAttribute('num',i);//在circle上面设置一个属性，为了后面进行的点击切换
        }
    }
    //只显示一个图片，主要的切换函数,根据index切换
    function move(){
        clearclass();
        items[index].className = "item active";
        circles[index].className = "circle white";
    }
    //直接运行
    move();
    leftBtn.onclick = ()=>{
        if(index<items.length){
            index--;
        }
        else{
            index = items.length - 1;//调到最后一张图
        }
        move();
    }
    rightBtn.onclick = ()=>{
        if(index<items.length-1){
            index++;
        }
        else{
            index = 0;//调到第一张图
        }
        move();
    }
//自动切换
    timer = setInterval(() => {
        rightBtn.onclick();
    }, 3000);

    //下方小圆点的点击切换
    for(let k =0 ;k<circles.length;k++){
        circles[k].addEventListener("click",()=>{
            var point_index = circles[k].getAttribute("num");
            index = point_index;
            move();
        })
    }
    //鼠标移入清除计时器
    content.onmouseover = ()=>{
        leftBtn.style.opacity = 1;
        rightBtn.style.opacity = 1;
        clearInterval(timer);
        timer = setInterval(() => {
            rightBtn.onclick();
        }, 5000);
    }
    content.onmouseleave = ()=>{
        leftBtn.style.opacity = 0;
        rightBtn.style.opacity = 0;
        clearInterval(timer);
        timer = setInterval(() => {
            rightBtn.onclick();
        }, 3000);
    }
};
